import { Button, Card, Col, Input, Pagination, Row, Table, type TableProps, Tag } from 'antd'
import useDataList from '../hooks/useDataList.ts'
import { getEquipmentList } from '../../api/equipment.ts'

const columns: TableProps<DataType>['columns'] = [
  {
    title: 'No.',
    key: 'index',
    render: (_text: number, _record: DataType, index) => index + 1,
  },
  {
    title: '设备名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '设备编号',
    dataIndex: 'no',
    key: 'no',
  },
  {
    title: '负责人',
    dataIndex: 'person',
    key: 'person',
  },
  {
    title: '负责人电话',
    dataIndex: 'tel',
    key: 'tel',
  },
  {
    title: '理论寿命',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '剩余寿命',
    dataIndex: 'rest',
    key: 'rest',
  },
  {
    title: '使用状态',
    dataIndex: 'status',
    key: 'status',
    render: (text: number) => {
      if (text == 1) {
        return <Tag color="green">使用中</Tag>
      } else if (text == 2) {
        return <Tag color="yellow">维护中</Tag>
      } else {
        return <Tag color="red">已损坏</Tag>
      }
    },
  },
  {
    title: '最近保养日期',
    dataIndex: 'last',
    key: 'last',
  },
  {
    title: '规格型号',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '生产厂家',
    dataIndex: 'from',
    key: 'from',
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    render: () => {
      return (
        <Button type="primary" size="small">
          详细
        </Button>
      )
    },
  },
]

interface SearchType {
  name: string
  person: string
}

export interface DataType {
  id: number
  no: string
  name: string
  person: string
  tel: number
  time: string
  rest: string
  status: string
  last: string
  type: string
  from: string
}

export default function Equipment() {
  const {
    loading,
    pageNumber,
    pageSize,
    queryParam,
    total,
    dataList,
    handleQueryParamChange,
    handlePageChange,
    loadData,
    handleReset,
  } = useDataList<DataType, SearchType>(
    {
      name: '',
      person: '',
    },
    getEquipmentList,
  )
  return (
    <div>
      <Card>
        <Row gutter={16} className="search">
          <Col span={6}>
            <p>设备名称:</p>
            <Input placeholder="请输入设备名称" value={queryParam.name} name="name" onChange={handleQueryParamChange} />
          </Col>
          <Col span={6}>
            <p>负责人:</p>
            <Input
              placeholder="请输入负责人"
              value={queryParam.person}
              name="person"
              onChange={handleQueryParamChange}
            />
          </Col>

          <Col>
            <Button type="primary" onClick={() => loadData(pageNumber, pageSize)}>
              查询
            </Button>
            <Button className="ml" onClick={handleReset}>
              重置
            </Button>
          </Col>
        </Row>
      </Card>
      <Card>
        <Table pagination={false} loading={loading} dataSource={dataList} columns={columns} />
        <Pagination
          defaultCurrent={1}
          current={pageNumber}
          pageSize={pageSize}
          total={total}
          showQuickJumper
          onChange={handlePageChange}
          className="fr mt"
        />
      </Card>
    </div>
  )
}
